<!DOCTYPE html>
<html>
<head>
    <title>台账详情</title>
    #parse("sys/header.html")
    <style>
        .no-border-top {
            border-top: none !important;
        }

        .no-border-right {
            border-right: none !important;
        }

        .col-xs-1, .col-xs-11, .col-xs-10, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
            padding: 1rem 5px;
            border-right: 1px solid #ddd;
        }

        .col-3 {
            padding: 0 0 1000rem 0 !important;
        }

        .ibox-content {
            border-top: none;
        }

        .row [class*="col-"] {
            margin-bottom: -1000rem;
            padding-bottom: 1001rem;
        }

        .row {
            overflow: hidden;
            padding: 0;
        }

        p span {
            padding-left: 2rem;
        }

        .text-center {
            color: #808080 !important;
        }
    </style>
</head>
<body class="gray-bg">
<div id="rrapp" v-cloak>
    <div class="row" style="border-top: none!important;">
        <div class="col-xs-12">
            <div class="ibox-content p-xl">
                <Row>
                    <i-col span="8" v-show="isShow">
                        <a :href="sparePart.reserve2" target="_blank">
                            <img :src="sparePart.reserve2" alt="图片加载中" style="width: 90%;height: 250px"/>
                        </a>
                    </i-col>
                    <i-col span="8" v-show="!isShow">
                        <a :href="sparePart.reserve2" target="_blank">
                            <img :src="noImgSrc" style="width: 90%;height: 250px"/>
                        </a>
                    </i-col>
                    <i-col span="16">
                        <Row>
                            <i-col span="12">备件名称：{{sparePart.name}}</i-col>
                            <i-col span="12">规格：{{sparePart.spec}}</i-col>
                        </Row>
                        <Row>
                            <i-col span="12">系统编码：{{sparePart.partCode}}</i-col>
                            <i-col span="12">ERP编码：{{sparePart.erpCode}}</i-col>
                        </Row>
                        <Row>
                            <i-col span="12">录入单位：{{sparePart.useUnit}}</i-col>
                            <i-col span="12">生产厂家：{{sparePart.producor}}</i-col>
                        </Row>
                        <Row>
                            <i-col span="12">平均到货周期：{{sparePart.avgDeliveryCycle}}</i-col>
                            <i-col span="12">平均使用周期：{{sparePart.avgConsumeCycle}}</i-col>
                        </Row>
                        <Row>
                            <i-col span="12">备件类型：{{sparePart.installPositionName}}</i-col>
                            <i-col span="12">库存数量：{{sparePart.stockNum}}</i-col>
                        </Row>
                        <Row>
                            <i-col span="12">安全库存：{{sparePart.safeNum}}</i-col>
                            <i-col span="12">报废数量：{{sparePart.scrapNum}}</i-col>
                        </Row>
                        <Row>
                            <i-col span="12">录入人员：{{sparePart.createUserName}}</i-col>
                            <i-col span="12">录入时间：{{sparePart.createDate}}</i-col>
                        </Row>
                        <Row>
                            <i-col span="12">更新人员：{{sparePart.updateUserName}}</i-col>
                            <i-col span="12">最近更新时间：{{sparePart.updateDate}}</i-col>
                        </Row>
                        <Row>
                            <i-col span="12">现场装机总量：{{sparePart.reserve1}}</i-col>
                            <i-col span="12">备注：{{sparePart.remark}}</i-col>
                        </Row>
                        <Row>
                            <i-col span="12">
                                <div style="display: flex;width: 100%">
                                    <div style="width: 60px;display: flex;align-items: center">
                                        备件图片
                                    </div>
                                    <div style="width: 240px;">
                                        <i-input v-model="sparePart.reserve2" placeholder="请上传不得大于5M的备件图片"
                                                 readonly @on-click="eyeFile(sparePart.reserve2)" icon="ios-eye"/>
                                    </div>
                                    <div>
                                        <Upload ref="uploadFile" multiple style="width: 300px;"
                                                action="../sys/oss/sparepart/image"
                                                :on-success="handleSuccess"
                                                :show-upload-list="false"
                                        >
                                            <i-button icon="ios-cloud-upload-outline">修改</i-button>
                                        </Upload>
                                    </div>
                                </div>
                            </i-col>
                        </Row>
                    </i-col>
                </Row>
                <Card>
                    <Tabs value="record0">
                        <Tab-pane label="事务详情" name="record0">
                            <div style="border: 1px solid #7f7f7f">
                                <div class="row no-border-top">
                                    <div class="col-xs-1 text-center">事务</div>
                                    <div class="col-xs-1 text-center">数量</div>
                                    <div class="col-xs-1 text-center">操作员</div>
                                    <div class="col-xs-2 text-center">事务时间</div>
                                    <div class="col-xs-4 text-center">事项</div>
                                    <div class="col-xs-3 text-center">业务单号</div>
                                </div>
                                <div class="row" v-for="item in sparePartReportList">
                                    <div class="col-xs-1 text-center">{{item.transactionTypeName}}</div>
                                    <div class="col-xs-1 text-center">{{item.quantity}}</div>
                                    <div class="col-xs-1 text-center">{{item.operatorName}}</div>
                                    <div class="col-xs-2 text-center">{{transDate(item.operateDate,"yyyy-MM-dd hh:mm")}}</div>
                                    <div class="col-xs-4 text-center">{{item.transactionDesc}}</div>
                                    <div class="col-xs-3 text-center">{{item.busOrderNo}}</div>
                                </div>
                            </div>
                        </Tab-pane>
                        <Tab-pane label="备件生命周期" name="record1">
                            <div style="border: 1px solid #7f7f7f">
                                <div class="row no-border-top">
                                    <div class="col-xs-1 text-center">采购数</div>
                                    <div class="col-xs-2 text-center">订单生成时间</div>
                                    <div class="col-xs-1 text-center">到场数</div>
                                    <div class="col-xs-2 text-center">实际到货时间</div>
                                    <div class="col-xs-2 text-center">实际到货周期</div>
                                    <div class="col-xs-1 text-center">使用数</div>
                                    <div class="col-xs-1 text-center">耗用时间</div>
                                    <div class="col-xs-2 text-center">使用周期</div>
                                </div>
                                <div class="row" v-for="item in sparePartLifeCycleList">
                                    <div class="col-xs-1 text-center">{{item.purchaseQuantity}}</div>
                                    <div class="col-xs-2 text-center">{{item.orderGenerateTime}}</div>
                                    <div class="col-xs-1 text-center">{{item.arriveQuantity}}</div>
                                    <div class="col-xs-2 text-center">{{item.actualArriveTime}}</div>
                                    <div class="col-xs-2 text-center">{{item.actualDeliveryCycle}}</div>
                                    <div class="col-xs-1 text-center">{{item.consumeQuantity}}</div>
                                    <div class="col-xs-1 text-center">{{item.consumeDate}}</div>
                                    <div class="col-xs-2 text-center">{{item.consumeCycle}}</div>
                                </div>
                            </div>
                        </Tab-pane>
                    </Tabs>
                </Card>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    let id = getQueryString("id");
    var vm = new Vue({
        el: '#rrapp',
        data: {
            sparePart: {},  //备件
            sparePartReportList: [],// 备件台账项列表
            sparePartLifeCycleList: [],// 备件生命周期
            isShow: false,//是图片时展示
            noImgSrc: 'http://10.107.250.35:9000/erms/sys/87dbf4f96080a719a26819945dacc58.jpg'
        },
        methods: {
            handleSuccess: function (res, file) {
                vm.sparePart.reserve2 = file.response.url;
                var url = vm.sparePart.reserve2;
                if (url) {
                    this.$Loading.finish();
                    Ajax.request({
                        url: '../sparepart/updateImage',
                        params: JSON.stringify(vm.sparePart),
                        type: "POST",
                        contentType: "application/json",
                        successCallback: function (r) {
                            alert('操作成功', function (index) {
                                vm.reload();
                            });
                        }
                    });
                }
            },
            /*111*/
            eyeFile: function (url) {
                if (url) {
                    window.open(url);
                } else {
                    alert('还未上传文件');
                }
            },
            getInfo: function () {
                Ajax.request({
                    url: "../sparepart/info/" + id,
                    async: true,
                    successCallback: function (r) {
                        // 获取备件基础信息
                        vm.sparePart = r.sparePart;
                        if (vm.sparePart.reserve2) {
                            let imgWhiteList = ['png', 'img', 'jpeg', 'jpg']
                            let suffixIndex = vm.sparePart.reserve2.lastIndexOf('.');
                            let suffix = vm.sparePart.reserve2.substring(suffixIndex + 1, vm.sparePart.reserve2.length)
                            if (imgWhiteList.indexOf(suffix) > -1) {
                                vm.isShow = true
                            } else {
                                vm.isShow = false
                            }
                        } else {
                            vm.isShow = false
                        }
                        // 获取备件出、入、退、耗用列表
                        vm.getSparePartTransaction();
                        //    获取备件生命周期
                        vm.getsparePartLifeCycle();
                    }
                });
            },
            getSparePartTransaction: function () {
                Ajax.request({
                    url: "../spareparttransactionrecord/queryAll",
                    params: {sparePartId: id},
                    async: false,
                    successCallback: function (r) {
                        vm.sparePartReportList = r.list;
                    }
                });
            },
            getsparePartLifeCycle: function () {
                Ajax.request({
                    url: "../sparepart/lifeCycle",
                    params: {id: id},
                    async: false,
                    successCallback: function (r) {
                        vm.sparePartLifeCycleList = r.list;
                    }
                });
            }
        },
        created: function () {
            this.getInfo();
        }
    });
</script>

</body>

</html>
